<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星际旋转</title>
    <link rel="stylesheet" href="./54-星际旋转.css">
</head>
<style>
	* {
		box-sizing: border-box;
		margin: 0;
	}
	
	.solar-system {
		--sun-diameter: 12dvh;
		--sun-spacing: .15;
	
		/* very much not to scale */
		--mercury-size: .2;
		--venus-size: .25;
		--earth-size: .25;
		--mars-size: .25;
		--jupiter-size: .75;
		--saturn-size: .6;
		--uranus-size: .4;
		--neptune-size: .4;
		--pluto-size: .1;
	
		/* to scale! https://en.wikipedia.org/wiki/Orbital_period#Examples_of_sidereal_and_synodic_periods */
		--mercury-period: .24;
		--venus-period: .615;
		--earth-duration: 5s;
		--mars-period: 1.88;
		--jupiter-period: 11.86;
		--saturn-period: 29.46;
		--uranus-period: 84;
		--neptune-period: 164;
		--pluto-period: 248;
	
		padding: 1rem 0 0 0;
		overflow: hidden;
	
		display: grid;
		gap: calc(var(--sun-diameter) * .15);
		grid-template-rows: repeat(10, auto);
		grid-template-areas:
			"pluto"
			"neptune"
			"uranus"
			"saturn"
			"jupiter"
			"mars"
			"earth"
			"venus"
			"mercury"
			"sun";
	
		.orbit {
			--sun-margin: calc(var(--sun-diameter) * var(--sun-spacing));
			--planet-diameter: max(var(--planet-size) * var(--sun-diameter), 1rem);
	
			grid-column: 1 / -1;
			display: grid;
			grid-template-rows: subgrid;
			grid-template-columns: subgrid;
			justify-items: center;
	
			&:has(.sun) {
				--planet-size: 1;
				grid-area: sun;
				padding-block: var(--sun-margin);
	            .label {
	                color: transparent;
	            }
			}
			&:has(.mercury) {
				--planet-size: var(--mercury-size);
				--planet-duration: calc(var(--earth-duration) * var(--mercury-period));
				grid-row: mercury-start / sun-end;
				.planet, .label {
					grid-area: mercury;
				}
			}
			&:has(.venus) {
				--planet-size: var(--venus-size);
				--planet-duration: calc(var(--earth-duration) * var(--venus-period));
				grid-row: venus-start / sun-end;
				.planet, .label {
					grid-area: venus;
				}
			}
			&:has(.earth) {
				--planet-size: var(--earth-size);
				--planet-duration: var(--earth-duration);
				grid-row: earth-start / sun-end;
				.planet, .label {
					grid-area: earth;
				}
			}
			&:has(.mars) {
				--planet-size: var(--mars-size);
				--planet-duration: calc(var(--earth-duration) * var(--mars-period));
				grid-row: mars-start / sun-end;
				.planet, .label {
					grid-area: mars;
				}
			}
			&:has(.jupiter) {
				--planet-size: var(--jupiter-size);
				--planet-duration: calc(var(--earth-duration) * var(--jupiter-period));
				grid-row: jupiter-start / sun-end;
				.planet, .label {
					grid-area: jupiter;
				}
			}
			&:has(.saturn) {
				--planet-size: var(--saturn-size);
				--planet-duration: calc(var(--earth-duration) * var(--saturn-period));
				grid-row: saturn-start / sun-end;
				.planet, .label {
					grid-area: saturn;
				}
	
			}
			&:has(.uranus) {
				--planet-size: var(--uranus-size);
				--planet-duration: calc(var(--earth-duration) * var(--uranus-period));
				grid-row: uranus-start / sun-end;
				.planet, .label {
					grid-area: uranus;
				}
			}
			&:has(.neptune) {
				--planet-size: var(--neptune-size);
				--planet-duration: calc(var(--earth-duration) * var(--neptune-period));
				grid-row: neptune-start / sun-end;
				.planet, .label {
					grid-area: neptune;
				}
			}
			&:has(.pluto) {
				--planet-size: var(--pluto-size);
				--planet-duration: calc(var(--earth-duration) * var(--pluto-period));
				grid-row: pluto-start / sun-end;
				.planet, .label {
					grid-area: pluto;
				}
			}
		}
	
		.planet {
			height: var(--planet-diameter);
			aspect-ratio: 1;
			border-radius: 50%;
			/* background-color: rgb(255 0 0 / .9); */
			z-index: 1;
			background-image: radial-gradient(circle at center 80%, rgb(255 255 255 / .4), rgb(255 255 255 / 0) 50%);
	
			&.sun {
				--sun-color: #ffd800;
				background-color: var(--sun-color);
				background-image: none;
				box-shadow: 0 0 42px 0 color-mix(in oklch, transparent, var(--sun-color) 50%);
			}
			&.mercury {
				background-color: #989494;
			}
			&.venus {
				background-color: #e1d59d;
			}
			&.earth {
				background-color: #008bb3;
			}
			&.mars {
				background-color: #dfa272;
			}
			&.jupiter {
				background-color: #af7045;
			}
			&.saturn {
				background-color: #d3b57c;
			}
			&.uranus {
				background-color: #77aac4;
			}
			&.neptune {
				background-color: #3a80a4;
			}
			&.pluto {
				background-color: #989494;
			}
		}
	
		.orbit-ring {
			grid-area: 1 / 1 / -1 / -1;
			height: calc(2 * (100% - var(--planet-diameter) / 2 - var(--sun-diameter) / 2 - var(--sun-margin)));
			aspect-ratio: 1;
			translate: 0 calc(var(--planet-diameter) / 2);
			border-radius: 50%;
			border: 1px solid rgb(255 255 255 / .5);
			z-index: 0;
		}
	
		.axis {
			grid-area: 1 / 1 / -1 / -1;
			display: grid;
			grid-template-rows: subgrid;
			transform-origin: center calc(100% - var(--sun-diameter) / 2 - var(--sun-margin));
			animation: orbit var(--planet-duration) linear infinite;
		}
	
		.label {
			align-self: center;
			translate: 0 -.5lh;
			z-index: 2;
		}
	}
	
	@keyframes orbit {
		from {
			rotate: 0turn;
		}
	
		to {
			rotate: 1turn;
		}
	}
	
	
	body {
		font-family: system-ui, sans-serif;
		color: white;
		background: linear-gradient(to bottom, #112, #223);
	}
	
	a {
		color: currentcolor;
	}
	
	h1 {
		font-weight: 400;
	}
	
	.layout {
		min-height: 100dvh;
		display: grid;
	
		& > .solar-system {
			align-self: end;
		}
	}
	
	.content {
		max-inline-size: 40rem;
		margin: 8px;
		& > * + * {
			margin-block-start: 1em;
		}
	}

</style>
<body>
    <div class="layout">
    	<div class="content">
    		<h1><strong>C</strong>ascading <strong>S</strong>olar <strong>S</strong>ystem</h1>
    		<p>I was <a href="https://xkcd.com/356/">nerd sniped</a> by a <a href="https://www.reddit.com/r/css/comments/1dimy4t/how_can_i_attach_the_labels_to_the_orbitsthey/">question on Reddit</a>. Read more on <a href="https://noahliebman.net/2024/06/cascading-solar-system/">my blog</a>.</p>
    	</div>
    
    	<ol class="solar-system">
    		<li class="orbit">
            	<div class="label">Sun</div>
    			<div class="planet sun"></div>
    		</li>
    		<li class="orbit">
    			<div class="label">Mercury</div>
    			<div class="orbit-ring"></div>
    			<div class="axis">
    				<div class="planet mercury"></div>
    			</div>
    		</li>
    		<li class="orbit">
    			<div class="label">Venus</div>
    			<div class="orbit-ring"></div>
    			<div class="axis">
    				<div class="planet venus"></div>
    			</div>
    		</li>
    		<li class="orbit">
    			<div class="label">Earth</div>
    			<div class="orbit-ring"></div>
    			<div class="axis">
    				<div class="planet earth"></div>
    			</div>
    		</li>
    		<li class="orbit">
    			<div class="label">Mars</div>
    			<div class="orbit-ring"></div>
    			<div class="axis">
    				<div class="planet mars"></div>
    			</div>
    		</li>
    		<li class="orbit">
    			<div class="label">Jupiter</div>
    			<div class="orbit-ring"></div>
    			<div class="axis">
    				<div class="planet jupiter"></div>
    			</div>
    		</li>
    		<li class="orbit">
    			<div class="label">Saturn</div>
    			<div class="orbit-ring"></div>
    			<div class="axis">
    				<div class="planet saturn"></div>
    			</div>
    		</li>
    		<li class="orbit">
    			<div class="label">Uranus</div>
    			<div class="orbit-ring"></div>
    			<div class="axis">
    				<div class="planet uranus"></div>
    			</div>
    		</li>
    		<li class="orbit">
    			<div class="label">Neptune</div>
    			<div class="orbit-ring"></div>
    			<div class="axis">
    				<div class="planet neptune"></div>
    			</div>
    		</li>
    		<li class="orbit">
    			<div class="label">Pluto</div>
    			<div class="orbit-ring"></div>
    			<div class="axis">
    				<div class="planet pluto"></div>
    			</div>
    		</li>
    	</ol>
    </div>
	<script>
		/*
			Partially works around a Safari bug. Other browsers don’t need this ugly hack.
			Possibly this one https://bugs.webkit.org/show_bug.cgi?id=262729?
		*/
		const fixIt = () => {
			solarSystem.style.display = "none";
			requestAnimationFrame(() => {
				solarSystem.style.display = "";
			});
		}
		
		const ro = new ResizeObserver(entries => {
			const sunHeight = solarSystem.querySelector(".sun").getBoundingClientRect().height;
			const solarSystemHeight = solarSystem.getBoundingClientRect().height;
			if(solarSystemHeight > 10 * sunHeight) {
				fixIt();
			}
		});

	</script>
</body>

</html>